<template>
	<view>
		<view class="box">
			<view class="top_title_area">
				<view class="re df aic jcc h60">
					<view class="back_arrow_pos" @tap="back">
						<image src="/static/icon_arrow_7.png" class="img6 vt"></image>
					</view>
					<view class="fs36 cor_fff">会员购买</view>
				</view>
				<view class="card_box">
					<view class="re" style="z-index: 2;">
						<view class="flex_box aic">
							<view class="mr35 re">
								<image :src="userInfo.icon" class="img20 vt"></image>
							</view>
							<view class="item">
								<view class="fs30 cor_333">{{userInfo.name}}</view>
								<view>
									<view class="mt15 tag_1" v-if="!userInfo.beMember">您还未开通会员</view>
									<view class="mt15 tag_1" v-if="userInfo.beMember">{{userInfo.endDate}} 到期</view>
								</view>
							</view>
						</view>
					</view>
					<image src="/static/card_box_1.png" class="bg_img"></image>
				</view>
			</view>

			<view class="menu_content_box">
				<view class="pl30 pr30">
					<view class="mt50 pt35 df jcsb">
						<view class="card_item" v-for="item, index in  vipList" :class=" currentIndex == index ? 'active' : '' " @tap="change(item,index);">
							<view class="fs30">{{item.name}}</view>
							<view class="fs30 fwb cor_FFA">￥<text class="fs48">{{item.amount}}</text></view>
							<view class="fs20 cor_999">折合{{item.dailyFee}}元/天</view>
						</view>
						<!-- <view class="card_item" :class=" currentIndex == 1 ? 'active' : '' " @click="change('1');">
							<view class="fs30">季度会员</view>
							<view class="fs30 fwb cor_FFA">￥<text class="fs48">88</text></view>
							<view class="fs20 cor_999">折合0.78元/天</view>
						</view>
						<view class="card_item" :class=" currentIndex == 2 ? 'active' : '' " @click="change('2');">
							<view class="fs30">年度会员</view>
							<view class="fs30 fwb cor_FFA">￥<text class="fs48">288</text></view>
							<view class="fs20 cor_999">折合0.73元/天</view>
						</view> -->
					</view>
					
					<view class="mt50 fs36 fwb cor_333">会员权益</view>
					<view class="mt35 fs24 lh38 cor_666">
						{{rightText}}。
					</view>
				</view>
			</view>

			<!-- 立即支付-按钮 -->
			<view class="pay_immediately_btn" @tap="payVipOrder">立即支付</view>

		</view><!-- box -->
	</view>
</template>

<script>
	import {
		toast,
		showLoading,
		hideLoading
	} from '@/utils/toast.js';
	import {
		getMemberKindsApi,
		payOrderApi,
		getUserInfoApi
	} from '@/http/api.js';
	export default {
		data() {
			return {
				vipList: [],
				currentIndex: 0,
				rightText: '您可以在1个月时间内免费浏览资料库中的所有资料，折合每天只需要0.99元。',
				userInfo: {
					
				}
			}
		},
		onLoad() {
			try {
			    this.userInfo = uni.getStorageSync('userInfo');
			} catch (e) {
			    // error
			}
			this.getUserInfo();
			this.getMemberKinds();
		},
		methods: {
			getMemberKinds() {
				let that = this;
				showLoading('加载中');
				getMemberKindsApi({
					
				}).then(res=>{
					that.vipList = res.data;
					for (let i in res.data) {
						that.rightText = res.data[i].introduce;
					}
					hideLoading();
				}).catch(err=>{
					hideLoading();
				})
			},
			
			getUserInfo() {
				let that = this;
				getUserInfoApi({
					userId: uni.getStorageSync('userId')
				}).then(res=>{
					that.userInfo = res.data;
				}).catch(err=>{
					
				})
			},
			
			change: function(item,index) {
				this.currentIndex = index;
				this.rightText = item.introduce;
			},
			
			back: function() {
				uni.navigateBack({
					delta: 1
				})
			},
			
			payVipOrder() {
				let url = '/pages/order_payment/order_payment' + '?type=1&title=' + this.vipList[this.currentIndex].name + '&id=' + this.vipList[this.currentIndex].id;
				uni.navigateTo({
					url: url
				})
				
			}
		}
	}
</script>

<style>
	.h60 {
		height: 60rpx;
	}

	.menu_content_box {
		position: relative;
		height: calc(100vh - 481rpx);
		background-color: #ffffff;
		border-radius: 16rpx 16rpx 0 0;
		margin-top: -22rpx;
		z-index: 2;
	}

	.top_title_area {
		position: relative;
		padding-top: 65rpx;
		height: 403rpx;
		background: linear-gradient(155deg, #2A2821 0%, #3D3A30 100%);
	}

	.back_arrow_pos {
		position: absolute;
		top: 50%;
		left: 24rpx;
		width: 19rpx;
		height: 36rpx;
		z-index: 2;
		transform: translateY(-50%);
	}

	.card_box {
		position: relative;
		width: 690rpx;
		height: 250rpx;
		padding: 88rpx 20rpx 0;
		margin-left: auto;
		margin-right: auto;
		margin-top: 11rpx;
		overflow: hidden;
	}

	.card_box .bg_img {
		position: absolute;
		top: 0;
		left: 0;
		width: 690rpx;
		height: 250rpx;
		z-index: 1;
	}

	.pay_immediately_btn {
		display: block;
		height: 98rpx;
		line-height: 98rpx;
		text-align: center;
		font-size: 36rpx;
		color: #565346;
		background: #e4d7a1;
	}

	.tag_1 {
		display: inline-block;
		padding: 0 22rpx;
		height: 38rpx;
		line-height: 38rpx;
		font-size: 20rpx;
		color: #595543;
		background-color: #D2C697;
		border-radius: 19rpx;
	}

	.card_item {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		justify-content: space-between;
		width: 214rpx;
		height: 260rpx;
		padding: 34rpx 0 21rpx;
		color: #48463C;
		background: #fff;
		border: 2rpx solid #BFBFBF;
		border-radius: 8rpx;
	}

	.active {
		background-color: #FBF5DC;
		border-color: #D4C68D;
	}
</style>